---
title: SvelteKitからの移行
description: 既存のSvelteKitプロジェクトをAstroに移行するためのヒント
sidebar:
  label: SvelteKit
type: migration
stub: true
framework: SvelteKit
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[SvelteKit](https://kit.svelte.dev)は、Svelteの上に構築されたWebアプリケーション開発フレームワークです。

## SvelteKitとAstroの主な共通点

SvelteKitとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

- SvelteKitとAstroはどちらも、最新のJavaScriptによる静的サイトジェネレーター兼サーバーサイドレンダリングフレームワークです。
- 両者ともに、[`src/`フォルダを使用](/ja/basics/project-structure/#src)し、[ファイルベースルーティングのための特別なフォルダ](/ja/basics/astro-pages/)を持っています。ページの作成・管理方法は類似しています。
- Astroは[Svelteコンポーネントの公式インテグレーション](/ja/guides/integrations-guide/svelte/)を備え、Svelte用のNPMパッケージを[インストールして使用](/ja/guides/imports/#npm-packages)できます。既存のSvelte UIコンポーネントや依存関係をそのまま使える可能性があります。
- SvelteKitとAstroはどちらも[Headless CMS、API、Markdownファイルを使ったデータ取得](/ja/guides/data-fetching/)に対応しており、既存のコンテンツ執筆システムを継続利用できます。

## SvelteKitとAstroの主な相違点

SvelteKitサイトをAstroで再構築する際、以下のような違いに気付くでしょう：

- Astroはマルチページアプリ（MPA）をデフォルトとする一方、SvelteKitはSPAs（シングルページアプリケーション）を基本としつつ、MPAやSSRも組み合わせて構築できます。
- [コンポーネント](/ja/basics/astro-components/)：SvelteKitはSvelteコンポーネントを使用しますが、Astroでは[`.astro`コンポーネント](/ja/basics/astro-components/)でページを構築します。また、[React, Preact, Vue, Svelte, Solid, AlpineJS](/ja/guides/framework-components/)といった他のUIフレームワークのコンポーネントも利用できます。
- [コンテンツ駆動](/ja/concepts/why-astro/#コンテンツ駆動)：Astroはコンテンツを中心に設計されており、インタラクティブ性は必要に応じて段階的に導入できます。SvelteKitアプリがクライアントサイドでの高いインタラクティブ性を前提としている場合、Astroで同等の表現には多少の工夫が必要です。
- [Markdown対応](/ja/guides/markdown-content/)：AstroはMarkdownを標準でサポートしており、[`layout`プロパティを持つフロントマター](/ja/basics/layouts/#markdownのレイアウト)でページテンプレートを定義できます。SvelteKitベースのMarkdownブログを移行する場合、専用のMarkdown統合を別途追加する必要はなく、既存のMarkdownファイルを再利用できます。ただし、Astroでは各ルートに対して専用のフォルダを必要としないため、構造の再整理が必要な場合があります。

## SvelteKitブログをAstroに変換する

SvelteKitブログをAstroに変換するには、[公式のブログテーマスターター](https://astro.build/themes/)を使用するか、コミュニティ製のブログテーマを探して開始できます。

`create astro`コマンドに`--template`引数を指定すると、公式スターターを使ってAstroプロジェクトを開始できます。また、[既存のAstroリポジトリからプロジェクトを作成](/ja/install-and-setup/#cliウィザードからインストールする)することも可能です。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm create astro@latest -- --template blog
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm create astro@latest --template blog
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create astro --template blog
  ```
  </Fragment>
</PackageManagerTabs>

既存のMarkdownファイル（または任意でMDX）を、[AstroのMarkdown/MDXページとして取り込む](/ja/guides/markdown-content/)ことができます。

Astroでもファイルベースルーティングやレイアウトコンポーネントの概念はありますが、[Astroのプロジェクト構造](/ja/basics/project-structure/)を事前に確認しておくと、ファイル配置の理解に役立ちます。

ポートフォリオやドキュメントなど、他の種類のサイトを移行したい場合は、[astro.new](https://astro.new)で公式スターターテンプレートを参照してください。GitHubリポジトリのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodといったクラウド開発環境で即座に開けるワンクリックリンクも用意されています。

## コミュニティリソース

<CardGrid>
  <LinkCard title="Rewriting my blog from SvelteKit to Astro" href="https://kharann.com/blog/rewriting-my-blog/"/>
</CardGrid>

:::note[リソースを共有する]
SvelteKitサイトからAstroへの移行に役立つ動画やブログ記事を見つけた（または作成した）場合は、ぜひ[こちらのリスト](https://github.com/withastro/docs/edit/main/src/content/docs/ja/guides/migrate-to-astro/from-sveltekit.mdx)に追加してください！
:::
